settings (copy)
欲しい物があればバンバカ追加していってください！
code:style.css
@import "../work4ai ダークモード/style.css";
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
/* @import "../scrapboxのtitleをnav barに固定するUserCSS/style.css"; */
/* @import "../画像を並べるUserCSS/style.css"; */
/* @import "../関連ページリストのUserCSS/style.css";*/
@import "../のびのびドロップダウンUserCSS/style.css";
@import "../電光掲示板UserCSS/style.css";
@import "../💬雑談/style.css";
@import "../外部リンクをファビコンに置き換える記法/style.css";
@import "../インライン引用記法/style.css";
@import "../アップロードしたファイルリンクのデザインをボタンにするUserCSS/style.css";
@import "../work4aiイベント仕様UserCSS/style.css";
/* @import "../リンクを2カラムレイアウトにするUserCSS/style.css"; */
@import "../infoboxカスタムUserCSS/style.css";
@import "../ソートメニューを常時展開するUserCSS/style.css";
フォント
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,500;1,600;1,700;1,800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html, body, #editor, .grid li{font-family:'l-safe','calibri','Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
https://www.compart.com/en/unicode/category/Llunicode検索
色
code:style.css
:root{
--body-bg: #f5f5f5; /* 全体背景 */
/* --- ヘッダー --- */
--navbar-bg: #f7f7f7; /* ヘッダー背景 */
--navbar-title-color: #f55600; /* プロジェクト名 */
--new-button-bg: transparent; /* 新規作成ボタン ↓ */
--new-button-hover-bg: transparent;
--new-button-active-bg: transparent;
--new-button-horizontal-color: #f55600;
--new-button-vertical-color: #f55600; /* ↑ */
--search-form-bg: #efefef; /* 検索画面 */
--search-form-icon-color: #f55600; /* 🔍 */
--search-form-text-color: #555; /* 検索の文字 */
--navbar-icon-color: #f55600; /* ^ */
--navbar-icon-hovered-color: #000; /* ^:hover */
--navbar-icon-active-color: #f55600;
--telomere-updated: #ffb186; /* テロメア編集 */
--telomere-unread: #ffcbae; /* テロメア未読 */
/* --- 関連ページ ラベルデザイン --- */
--relation-label-bg: #fefefe;
--relation-label-empty-bg: #fefefe;
--relation-label-links-bg: #fefefe;
--relation-label-text:#304ea2;
--relation-label-empty-text: #b10e0e;
--relation-label-links-text: #304ea2;
}
.navbar .navbar-menu>li>a{ color: #f55600;}
data-hover-visible .new-button:hover{ /* 新規作成ボタン:hover */
--new-button-horizontal-color: #000;
--new-button-vertical-color: #000;}
.navbar .navbar-menu>li>a:hover,.navbar .navbar-menu>li>a:active,.navbar .navbar-menu>li>a:focus{color: #000;}
.dropdown-menu>li>a.selected, data-hover-visible .dropdown-menu>li>a.selected{ /* ソートメニュー */
color: #f55600;}
/*--- グローバルメニュー ---*/
.global-menu li a.updated, .global-menu li a.highlight{
border-left: 2px solid #f55600;
}
.global-menu .project-list-filter a:focus-within, .drawer .drawer-menu ul .project-list-filter a:focus-within{
box-shadow: 0 0px 0px 3px #b37e7e;
}
スクロール
code:style.css
::-webkit-scrollbar{
width: 7px;
}
::-webkit-scrollbar-thumb{
background-color: #848484;
border-radius: 4px;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
ホーム
サムネデザイン
code:style.css
body{ /* カードの下部影 */
--card-box-shadow:none;
--card-box-hover-shadow:none;
}
/*.page-list ul.grid{
/* display: flex;
/* flex-wrap: wrap;
/* justify-content: space-around;
/* margin-right: 0;
/*}*/
.page-list .grid li{
margin: 0 0 1.4em 0;
box-shadow: none;
}
.related-page-list {
padding: 0 3px;
}
.grid li.page-list-item a{
border-radius: 5px ;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.grid li.page-list-item a:hover{
border-radius: 5px;
}
/* --- アウトライン --- */
.grid li.page-list-item:not(.pin) a{outline: 3px solid #efefef;}
.grid li.page-list-item:not(.pin) a:hover{outline: 3px solid #f4af7f;}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img{
width: auto;
max-height: 90px;
max-width: 90%;
border-radius: 5px;
}
.grid li.page-list-item a .header{
padding: 13px 10px 8px;
border-top: none;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
}
.grid li.page-list-item a .hover{background: transparent;}
data-hover-visible .grid li.page-list-item.pin a:hover .hover {
opacity: 0;}
(Archive)ページを非表示に
code:style.css
.grid lidata-page-title^="(Archive)"{
display:none;
}
ソートメニュー中央揃え
code:off.css
.quick-launch{margin-top: 10px;margin-bottom: 24px;}
.quick-launch .flex-box{flex-direction: column;align-content: center;}
.quick-launch .right-box{justify-content: center;}
.dropdown-toggle{letter-spacing:0.1em;/*text-indent:0.1em;*/ }
.quick-launch .open>.dropdown-menu{
left: 50%;
transform: translateX(-50%);
}
https://gyazo.com/ebda7b1a2f80d4b30a5a58ef80126f32読めなくなってたので一時的にオフにしましたwogikaze.iconhttps://gyazo.com/acca2ae71e637a1db28600ad17fcdc11
そこも動いちゃうのか、失礼しましたnomadoor.icon
修正done
ピン
code:style.css
/*.page-list .grid li.pin{
/* width: 20%;
/* height: 150px;
/* padding: 0 10px;
/*}
/*.page-list .grid li.pin:first-of-type{
/* width: 80%;
/* height: 200px;
/*}
/*.page-list .grid li.pin:nth-of-type(2){
/* height: 200px;
/*}
/*.page-list .grid li.pin:nth-of-type(7){
/* margin-bottom: 7em;
}/*
.grid li.pin a{
width: 100%;
outline: none;
background-color: transparent;
}
.grid li.page-list-item a .pin{
display:none;
}
.grid li.pin a .content{
height: 100%;
flex-direction: row-reverse;
background-color: #ebe9e8;
}
/* --- 背景画像埋め込み --- */
.grid li.pin:first-of-type a .content {
background-image: url("https://scrapbox.io/files/65e12050d313690025233b5c.svg");
background-position: -166px -117px;
background-size: 110%;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.grid li.pin:first-of-type a:hover .content {
background-image: url(https://scrapbox.io/files/65e0c3fc1ba5bf0025d702d4.svg);
background-position: -257px -151px;
background-size: 130%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
/* 画像を読み込んでおく */
.grid li.pin:first-of-type a .content:after {
content: "";
background-image: url(https://scrapbox.io/files/65e0c3fc1ba5bf0025d702d4.svg);
opacity: 0;
visibility: hidden;
}
.grid li.pin a .content {
background-position: center;
background-size: 100%;
background-color: #e0e0e0;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.grid li.pin a:hover .content {
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
/* --- 背景画像URL --- */
.grid li.pindata-page-title="参加する" a .content{
background-image: url(https://i.gyazo.com/a2282949cf48b49d3d6e37ff62c9bc73.png); }
.grid li.pindata-page-title="🦊雑に学ぶComfyUI" a .content{
background-image: url(https://i.gyazo.com/3d79cd06f257f348df24aebf72701fce.png); }
.grid li.pindata-page-title="💬雑談" a .content{
background-image: url(https://i.gyazo.com/e82b58214b30952e0b4af6b24d5b24e5.png); }
.grid li.pindata-page-title="マシュマロ" a .content{
background-image: url(https://i.gyazo.com/da1ae244b93518c1184c53fa80543a14.png); }
.grid li.pindata-page-title="AI タイムライン" a .content{
background-image: url(https://i.gyazo.com/7a9f6e9de3186e7220bab1774f728f71.png); }
.grid li.pindata-page-title="表記ルール" a .content{
background-image: url(https://i.gyazo.com/cb87c5309dc7413039af0a2066ff7aae.png); }
/* --- タイトルデザイン --- */
.grid li.page-list-item a .header.pinned{
position: absolute;
bottom: 25px;
right: 0;
padding:0;
width: auto;
display:block;
background-color: #fff;
z-index: 2;
}
.grid li.pin:first-of-type a .header.pinned{
bottom: 43px;
}
.grid li.pin a .title{
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right,#000 50%,#8c8b8b 50%);
background-size: 200% 100%;
background-position-x: 100%;
padding: 0 5px 0 7px;
width:auto;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.grid li.pin a:hover .title{
background-position-x: 0;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.grid li.pin:first-of-type a .header.pinned{
background-color: transparent;
border-bottom: 2px solid #fff;
}
.grid li.pin:first-of-type a .title{
font-family:'jost';
font-style: italic;
font-weight: 500;
/*font-size: 5.3em;*/
padding: 13px 18px 0px 24px;
letter-spacing: 8px;
display: inline;
background-image: linear-gradient(to right,#f55600 50%,#000 50%);
}
.grid li.pin a .icon img{display:none;}
.grid li.pin a .description{display:none;}
ピン レスポンシブ
code:style.css
@media (767px <= width < 992px){
.page-list .grid li.pin{
padding: 0 7px;
margin: 0 0 1.1em 0;
}
.grid li.pin:first-of-type a .content {
background-position: -209px -95px;
background-size: 120%;
}
.grid li.pin:first-of-type a:hover .content {
background-position: -257px -106px;
background-size: 130%;
}
}
@media (width < 767px){
.page-list .grid li.pin{
width: 50%;
height: 120px;
}
.page-list .grid li.pin:nth-of-type(2){height: 120px;}
.page-list .grid li.pin:first-of-type{width: 100%;}
.grid li.pin:first-of-type a .header.pinned {bottom: 27px;}
.grid li.pin:first-of-type a .title{font-size: 4.4em;}
.grid li.pin:first-of-type a .content{
background-position: -220px -82px;
background-size: 130%;
}
.grid li.pin:first-of-type a:hover .content{
background-position: -251px -96px;
background-size: 140%;
}
}
未読 Date modifierd by icon アウトラインに色
code:style.css
.grid li.page-list-item.unread a{
outline: 3px solid #6ac983;
}
.grid li.page-list-item.unread a:hover{
outline: 3px solid #f4af7f;
}
ヘッダー
code:style.css
.brand-icon{display: none;}
.navbar{
box-shadow:none;
border-bottom: 7px solid #efefef;
}
@media (max-width: 450px){ /* スマホでのみ表示(左上のKamonが消えるため) */
.navbar .navbar-brand::before{
content: "🤔";
}
}
ページ
デザイン
code:style.css
.page{box-shadow:none;}
.line.line-title .text{
text-align: center;
font-weight: bold;
letter-spacing: 0.06em;
text-indent: 0.06em;
}
画像、動画、youtube
code:style.css
.line img.image,.video-player video,.iframe-video-player iframe{
border-radius: 8px;
border: 2px solid #efefef;
}
動画
code:style.css
.video-player video{
max-height: 360px;
}
アイコンデザイン
code:style.css
.line img.icon {
border-radius: 2px;
margin-left: 2px;
transform: translateY(2px);
}
外部リンクにホバーで注釈
外部リンクをファビコンに置き換える記法との競合がややこしすぎるので一旦停止
code:style.csss
.line a.link{position: relative;}
.line .indent > span > a.link:not(.icon):is(href$=".json")::after{
content: "ファイルをダウンロード";
width: 125px;
top: -39px;
}
.line .indent > span > a.link:not(.icon):is(href$=".json")::before{
top: -11px;
}
.line .indent > span > a.link:not(.icon)::after{
content: "新しいタブで開く";
position: absolute;
display: block;
width: 90px;
top: -31px;
left: 50%;
transform: translateX(-50%);
color: #ebf0f7;
padding: 0 3px;
font-size: 0.6em;
font-weight: bold;
letter-spacing: -0.1em;
text-align: center;
pointer-events: none;
opacity: 0;
background-color: #282828;
border-radius: 4px;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;
}
.line .indent > span > a.link:not(.icon):hover::after{
opacity: 1;
transition-delay: 0.5s;
}
.line .indent > span > a.link:not(.icon)::before{
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
top: -3px;
left: 50%;
transform: translateX(-50%);
border-top: 6px solid #282828;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
opacity: 0;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;
}
.line .indent > span > a.link:not(.icon):hover::before{
opacity: 1;
transition-delay: 0.5s;
}
スマホでの編集時にでてくるボタン
code:style.css
.expandable-menu{
background-color: #f7f7f7;
z-index: 2;
max-width: calc(100% - 85px);
}
.expandable-menu .page-menu .tool-btn i::before{color: #f55600; }
.expandable-menu .toggle-button{
color: #f55600;
opacity: 1;}
.page-menu.xs{margin-bottom: -0.5em;}
@media (max-width: 767px){
.app:has(.expandable-menu .toggle-button.open) .quick-launch .btn.project-home{
width: 41px;
color: transparent;
border-radius: 50%;
}
.app:has(.expandable-menu .toggle-button.open) .quick-launch .btn.project-home::after{
content: "";
position: absolute;
left: 0;
background-image: url(https://i.gyazo.com/03f922af4c0eb1659d4630db6b619aac.png);
background-size: 100%;
background-position: center;
height: 100%;
width: 100%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.app:has(.expandable-menu .toggle-button.open) .quick-launch .btn.project-home:hover::after{
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
}
https://gyazo.com/955676b056532a6439edf615390f3ea5
🤔nomadoor.icon
max-widthを短く変更
記法
関連ページ
デザイン
code:style.css
.related-page-list .grid li{margin: 0 14.4px 15.4px 0;}
.grid li.relation-label a {border-radius: 5px;}
リンクを2カラムレイアウトにするUserCSS
関連ページが左にあるの見にくいのでデフォルトにしたいですmiyamonz.icon
やりたい人が各自、自分のユーザーページで設定していただけると助かる
+1wogikaze.icon
画像がホバーしないと見えないのは好きじゃない
一番下までいかないと関連ページ見えないのがあんまりいけてないなぁと思ってるんですよね…nomadoor.icon
画像が無いページはdescriptionが表示されるので、デザインに統一感ない感じもなんだかなあと
ただパフォーマンスめちゃめちゃ悪くてUXが大変悪いので一旦切ります
https://scrapbox.io/files/65e12050d313690025233b5c.svg